$(function () {
  setAchievingRate();
  setTask();
  setExecute();
  setMaterial_consumptionChart();
  setFault_causeChart();
  //大屏
  $(".left-menu").on("click", "ul li span", function () {
    $(this)
      .addClass("span-active animate__bounceIn")
      .parent("li")
      .siblings("li")
      .children("span")
      .removeClass("span-active animate__bounceIn");
    //option series   data
    //获取自定义属性值
    var key = $(this).attr("data-type");
    var leftMenus = ["introduce", "plan", "analysis", "logistics"];
    //隐藏所有
    leftMenus.map((e) => {
      if (e != key) {
        $(`#${e}`).children().fadeOut("slow");
        $(`#${e}`).hide();
      }
    });
    if (key && key != "") {
      var element = leftMenus.find((e) => {
        return e === key;
      });
      $(`#${element}`).show();
      $(`#${element}`).children().fadeIn("slow");
      //根据key渲染不同的echart图表
      switch (key) {
        case leftMenus[0]:
          break;
        case leftMenus[1]:
          //当日完成
          totalNum($("#completetotalNum"), 1);
          totalNum($("#plantotalNum"), 1);
          setAchievingRate();
          break;
        case leftMenus[2]:
          setMaterial_consumptionChart();
          setFault_causeChart();
          break;
        case leftMenus[3]:
          setTask();
          setExecute();
          break;
      }
    }
    console.log(key);
    //取出对应的值
  });
  //定时器
  var index = 0;
  var timer = setInterval(function () {
    $.ajax({
        url: "http://localhost:8024/Home/GetMenuIndex",
      success: function (rust) {
        index = rust;
      },
      error: function (){
        clearInterval(timer);
      }
    });
    if (index > 3) {
      index = 0;
    }
    $(".left-menu ul li span").eq(index).click();
  }, 5000);

  //文字滚动
  if (scroll) {
    clearInterval(scroll);
  }
  var scroll = setInterval('autoScroll("#FontScroll","-39")', 2500);
  var scrollList = setInterval('autoScroll("#scrollDiv",-30)', 2500);
  $("#FontScroll").hover(
    function () {
      clearInterval(scroll);
    },
    function () {
      scroll = setInterval('autoScroll("#FontScroll","-39")', 2500);
    }
  );
});

function totalNum(obj, speed) {
  var singalNum = 0;
  var timer;
  var totalNum = obj.attr("total");

  if (totalNum) {
    timer = setInterval(function () {
      singalNum += speed;
      if (singalNum >= totalNum) {
        singalNum = totalNum;
        clearInterval(timer);
      }
      obj.html(singalNum);
    }, 1);
  }
}

/*订单计划达成率*/
var achievingRateChart;
function setAchievingRate() {
  if (
    achievingRateChart != null &&
    achievingRateChart != "" &&
    achievingRateChart != undefined
  ) {
    achievingRateChart.dispose();
  }
  achievingRateChart = echarts.init(document.getElementById("achievingRate"));
  // (1)准备数据
  var data = {
    year: [[24, 40, 10, 100, 90, 80, 70, 88, 99, 100, 100, 99]],
  };

  // 2. 指定配置和数据
  var option = {
    color: ["#00deff"],
    tooltip: {
      // 通过坐标轴来触发
      trigger: "axis",
    },
    grid: {
      top: "10%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true,
      backgroundColor: "transparent",
      borderColor: "transparent",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      // 去除刻度
      axisTick: {
        show: false,
      },
      // 修饰刻度标签的颜色
      axisLabel: {
        color: "#ffffff",
        fontSize: 12,
      },
      // 去除x坐标轴的颜色
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      // 去除刻度
      axisTick: {
        show: false,
      },
      // 修饰刻度标签的颜色
      axisLabel: {
        color: "#ffffff",
        fontSize: 14,
      },
      // 去除x坐标轴的颜色
      axisLine: {
        show: false,
      },
      // 修改y轴分割线的颜色
      splitLine: {
        lineStyle: {
          color: "transparent",
        },
      },
    },
    series: [
      {
        name: "计划达成率",
        type: "line",
        stack: "总量",
        // 是否让线条圆滑显示
        smooth: true,
        symbolSize: 7,
        symbol: "circle",
        data: data.year[0],
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba( 0,222,255, 0.4)",
                },
                {
                  offset: 0.8,
                  color: "rgba(0,222,255, 0.1)",
                },
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)",
          },
        },
        itemStyle: {
          normal: {
            label: {
              show: true,
              color: "inherit",
              fontWeight: "bold",
              fontSize: "15px",
            },
          },
        },
      },
    ],
  };
  achievingRateChart.setOption(option);
  window.addEventListener("resize", function () {
    achievingRateChart.resize();
  });
}

/*产能趋势*/
var capacityTrendChart;
function setcapacityTrend() {
  if (
    capacityTrendChart != null &&
    capacityTrendChart != "" &&
    capacityTrendChart != undefined
  ) {
    capacityTrendChart.dispose();
  }
  capacityTrendChart = echarts.init(document.getElementById("capacityTrend"));
  var data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
    ],
  };
  var option = {
    color: ["#0e6ee3", "yellow"],
    tooltip: {
      // 通过坐标轴来触发
      trigger: "axis",
    },
    legend: {
      // 距离容器10%
      right: "10%",
      // 修饰图例文字的颜色
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      top: "10%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true,
      backgroundColor: "transparent",
      borderColor: "transparent",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      // 去除刻度
      axisTick: {
        show: false,
      },
      // 修饰刻度标签的颜色
      axisLabel: {
        color: "rgba(255,255,255,.7)",
      },
      // 去除x坐标轴的颜色
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      // 去除刻度
      axisTick: {
        show: false,
      },
      // 修饰刻度标签的颜色
      axisLabel: {
        color: "#ffffff",
      },
      // 去除x坐标轴的颜色
      axisLine: {
        show: false,
      },
      // 修改y轴分割线的颜色
      splitLine: {
        lineStyle: {
          color: "transparent",
        },
      },
    },
    series: [
      {
        name: "计划达成率",
        type: "line",
        stack: "总量",
        // 是否让线条圆滑显示
        smooth: true,
        symbolSize: 7,
        symbol: "circle",
        data: data.year[0],
        itemStyle: {
          normal: {
            label: {
              show: true,
              color: "inherit",
              fontWeight: "bold",
              fontSize: "15px",
              formatter: (params) => {
                if (data.year[0].length - 1 == params.dataIndex) {
                  return params.value;
                } else {
                  return "";
                }
              },
            },
          },
        },
      },
      {
        name: "实际达成率",
        type: "line",
        stack: "总量",
        smooth: true,
        symbolSize: 7,
        symbol: "circle",
        data: data.year[1],
        itemStyle: {
          normal: {
            label: {
              show: true,
              color: "#fff",
              fontWeight: "bold",
              fontSize: "15px",
              formatter: (params) => {
                if (data.year[1].length - 1 == params.dataIndex) {
                  return params.value;
                } else {
                  return "";
                }
              },
            },
          },
        },
      },
    ],
  };
  capacityTrendChart.setOption(option);
}

//文字滚动
function autoScroll(obj,top) {
  $(obj)
    .find("ul")
    .animate(
      {
        marginTop: top,
      },
      1000,
      function () {
        $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
      }
    );
}

//各任务占比
var taskBarChart;
function setTask() {
  if (taskBarChart != null && taskBarChart != "" && taskBarChart != undefined) {
    taskBarChart.dispose();
  }
  taskBarChart = echarts.init(document.getElementById("task"));
  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      textStyle: {
        color: "#ffffff",
      },
      borderWidth: "0",
      backgroundColor: "rgba(0,0,0,0.5)",
    },
    grid: {
      left: "3%",
      right: "10%",
      bottom: "1%",
      top: "3%",
    },
    xAxis: {
      show: false,
    },
    yAxis: {
      type: "category",
      inverse: true,
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        inside: true,
        splitNumber: 50,
        boundaryGap: [20, 20],
        textStyle: {
          color: "#fff",
          verticalAlign: "bottom",
          align: "left",
          padding: [200, 0, 10, 0],
          fontSize: "14",
        },
      },
      data: ["叶片分拣", "中端后段缝料架副本", "场内搬运", "其它"],
    },
    series: [
      {
        name: "百分比",
        type: "bar",
        barWidth: 20,
        barGap: 50,
        data: [70, 30, 34, 40],
        yAxisIndex: 0,
        itemStyle: {
          barBorderRadius: 15,
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "#03c893",
            },
            {
              offset: 1,
              color: "#0091ff",
            },
          ]),
        },
        label: {
          normal: {
            show: true,
            position: "right",
            textStyle: {
              color: "#fff",
              fontSize: "16",
            },
            formatter: function (param) {
              return param.value + "%";
            },
          },
        },
        z: 2,
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  taskBarChart.setOption(option);
  window.addEventListener("resize", function () {
    taskBarChart.resize();
  });
}

//任务执行情况
var executeChart;
function setExecute() {
  if (executeChart != null && executeChart != "" && executeChart != undefined) {
    executeChart.dispose();
  }
  executeChart = echarts.init(document.getElementById("execute"));
  var dataStyle = {
    normal: {
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      //shadowBlur: 40,
      //shadowColor: 'rgba(40, 40, 40, 1)',
    },
  };
  var placeHolderStyle = {
    normal: {
      color: "rgba(255,255,255,.05)",
      label: { show: false },
      labelLine: { show: false },
    },
    emphasis: {
      color: "rgba(0,0,0,0)",
    },
  };
  option = {
    color: ["#0f63d6", "#0f78d6", "#0f8cd6", "#0fa0d6", "#0fb4d6"],
    tooltip: {
      show: true,
      formatter: "{a} : {c} ",
    },
    legend: {
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 12,
      bottom: "3%",
      data: ["正在执行", "取消完成", "已结束", "待执行", "待重发"],
      textStyle: {
        color: "rgba(255,255,255,.6)",
      },
    },

    series: [
      {
        name: "正在执行",
        type: "pie",
        clockWise: false,
        center: ["50%", "42%"],
        radius: ["59%", "70%"],
        itemStyle: dataStyle,
        hoverAnimation: false,
        data: [
          {
            value: 80,
            name: "01",
          },
          {
            value: 20,
            name: "invisible",
            tooltip: { show: false },
            itemStyle: placeHolderStyle,
          },
        ],
      },
      {
        name: "取消完成",
        type: "pie",
        clockWise: false,
        center: ["50%", "42%"],
        radius: ["49%", "60%"],
        itemStyle: dataStyle,
        hoverAnimation: false,
        data: [
          {
            value: 70,
            name: "02",
          },
          {
            value: 30,
            name: "invisible",
            tooltip: { show: false },
            itemStyle: placeHolderStyle,
          },
        ],
      },
      {
        name: "已结束",
        type: "pie",
        clockWise: false,
        hoverAnimation: false,
        center: ["50%", "42%"],
        radius: ["39%", "50%"],
        itemStyle: dataStyle,
        data: [
          {
            value: 65,
            name: "03",
          },
          {
            value: 35,
            name: "invisible",
            tooltip: { show: false },
            itemStyle: placeHolderStyle,
          },
        ],
      },
      {
        name: "待执行",
        type: "pie",
        clockWise: false,
        hoverAnimation: false,
        center: ["50%", "42%"],
        radius: ["29%", "40%"],
        itemStyle: dataStyle,
        data: [
          {
            value: 60,
            name: "04",
          },
          {
            value: 40,
            name: "invisible",
            tooltip: { show: false },
            itemStyle: placeHolderStyle,
          },
        ],
      },
      {
        name: "待重发",
        type: "pie",
        clockWise: false,
        hoverAnimation: false,
        center: ["50%", "42%"],
        radius: ["20%", "30%"],
        itemStyle: dataStyle,
        data: [
          {
            value: 50,
            name: "05",
          },
          {
            value: 50,
            name: "invisible",
            tooltip: { show: false },
            itemStyle: placeHolderStyle,
          },
        ],
      },
    ],
  };

  /*arrName = getArrayValue(data, "name");
  arrValue = getArrayValue(data, "value");
  sumValue = eval(arrValue.join("+"));
  objData = array2obj(data, "name");
  optionData = getData(data);

  function getArrayValue(array, key) {
    var key = key || "value";
    var res = [];
    if (array) {
      array.forEach(function (t) {
        res.push(t[key]);
      });
    }
    return res;
  }
  function array2obj(array, key) {
    var resObj = {};
    for (var i = 0; i < array.length; i++) {
      resObj[array[i][key]] = array[i];
    }
    return resObj;
  }
  function getData(data) {
    var res = {
      series: [],
      yAxis: [],
    };
    for (let i = 0; i < data.length; i++) {
      res.series.push({
        name: "数据",
        type: "pie",
        clockWise: false,
        hoverAnimation: false,
        radius: [75 - i * 15 + "%", 65 - i * 15 + "%"],
        center: ["50%", "65%"],
        label: {
          show: false,
        },
        itemStyle: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          borderWidth: 5,
        },
        data: [
          {
            value: data[i].value,
            name: data[i].name,
          },
          {
            value: sumValue - data[i].value,
            name: "",
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            hoverAnimation: false,
          },
        ],
      });
      res.series.push({
        name: "",
        type: "pie",
        silent: true,
        z: 1,
        clockWise: false,
        hoverAnimation: false,
        radius: [75 - i * 15 + "%", 65 - i * 15 + "%"],
        center: ["50%", "65%"],
        label: {
          show: false,
        },
        itemStyle: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          borderWidth: 5,
        },
        data: [
          {
            value: 7.5,
            itemStyle: {
              color: "rgba(255,255,255,.1)",
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            hoverAnimation: false,
          },
          {
            value: 2.5,
            name: "",
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            hoverAnimation: false,
          },
        ],
      });
      res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
    }
    return res;
  }
  option = {
    legend: {
      orient: "vertical",
      show: true,
      top: "20",
      left: "center",
      data: arrName,
      itemWidth: 12,
      itemHeight: 12,

      //itemGap: 15,
      formatter: function (name) {
        return "{title|" + name + "}:{value|" + objData[name].value + "例}";
      },
      textStyle: {
        color: "rgba(255,255,255,.45)",
        rich: {
          title: {
            fontSize: 12,
            color: "rgba(255,255,255,.45)",
          },
          value: {
            fontSize: 12,
            color: "rgba(255,255,255,.85)",
          },
        },
      },
    },
    tooltip: {
      show: true,
      trigger: "item",
      formatter: "{a}<br>{b}:{c}({d}%)",
    },
    color: ["#FF8700", "#ffc300", "#00e473", "#009DFF"],
    grid: {
      top: "20%",
      bottom: "20%",
      left: "50%",
      containLabel: false,
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          inside: true,
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
          show: true,
        },
        data: optionData.yAxis,
      },
    ],
    xAxis: [
      {
        show: false,
      },
    ],
    series: optionData.series,
  };
  */
  executeChart.setOption(option);
  window.addEventListener("resize", function () {
    executeChart.resize();
  });
}

//物料消耗分析
var material_consumptionChart;
function setMaterial_consumptionChart() {
  if (
    material_consumptionChart != null &&
    material_consumptionChart != "" &&
    material_consumptionChart != undefined
  ) {
    material_consumptionChart.dispose();
  }
  material_consumptionChart = echarts.init(
    document.getElementById("material_consumption")
  );
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "shadow" },
    },
    legend: {
      x: "center",
      y: "0",
      icon: "circle",
      itemGap: 8,
      textStyle: { color: "#ffffff" },
      itemWidth: 10,
      itemHeight: 10,
    },
    grid: {
      left: "0",
      top: "30",
      right: "15",
      bottom: "0",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      axisLine: { show: false },

      axisLabel: {
        textStyle: {
          color: "#ffffff",
          fontSize: 14,
        },
      },
    },

    yAxis: {
      type: "value",
      splitNumber: 4,
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.05)",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#ffffff",
          fontSize: 14,
        },
      },
    },
    series: [
      {
        name: "拼板",
        type: "bar",
        barWidth: "15%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#8bd46e",
              },
              {
                offset: 1,
                color: "#03b48e",
              },
            ]),
            barBorderRadius: 11,
          },
        },
        data: [123, 154, 234, 321, 120, 390, 634, 123, 154, 234, 321, 108],
      },
      {
        name: "叶片",
        type: "bar",
        barWidth: "15%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#3893e5",
              },
              {
                offset: 1,
                color: "#248ff7",
              },
            ]),
            barBorderRadius: 11,
          },
        },
        data: [63, 194, 234, 321, 278, 110, 534, 63, 194, 234, 321, 278],
      },
      {
        name: "封头",
        type: "bar",
        barWidth: "15%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#43cadd",
              },
              {
                offset: 1,
                color: "#0097c9",
              },
            ]),
            barBorderRadius: 11,
          },
        },
        data: [23, 354, 334, 221, 178, 190, 234, 354, 334, 221, 178, 190],
      },
      {
        name: "其他",
        type: "bar",
        barWidth: "15%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#74ebd5",
              },
              {
                offset: 1,
                color: "#ACB6E5",
              },
            ]),
            barBorderRadius: 11,
          },
        },
        data: [23, 354, 334, 221, 178, 190, 234, 354, 334, 221, 178, 190],
      },
    ],
  };

  material_consumptionChart.setOption(option);
  window.addEventListener("resize", function () {
    material_consumptionChart.resize();
  });
}

//故障原因分析
var fault_causeChart;
function setFault_causeChart() {
  if (
    fault_causeChart != null &&
    fault_causeChart != "" &&
    fault_causeChart != undefined
  ) {
    fault_causeChart.dispose();
  }
  fault_causeChart = echarts.init(document.getElementById("fault_cause"));
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "shadow" },
    },
    legend: {
      x: "center",
      y: "0",
      icon: "roundRect",
      itemGap: 8,
      textStyle: { color: "#ffffff" },
      itemWidth: 10,
      itemHeight: 10,
    },
    grid: {
      left: "0",
      top: "30",
      right: "15",
      bottom: "0",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["1月", "2月", "3月", "4月", "5月", "6月"],
      axisLine: { show: false },

      axisLabel: {
        textStyle: {
          color: "#ffffff",
          fontSize: 14,
        },
      },
    },

    yAxis: {
      type: "value",
      splitNumber: 4,
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.05)",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#ffffff",
          fontSize: 14,
        },
      },
    },
    series: [
      {
        name: "设备缺陷",
        type: "bar",
        barWidth: "15%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#2980B9",
              },
              {
                offset: 1,
                color: "#6DD5FA",
              },
            ]),
            barBorderRadius: 2,
          },
        },
        data: [123, 154, 234, 321, 120, 390],
      },
      {
        name: "设备老化",
        type: "bar",
        barWidth: "15%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#ef8e38",
              },
              {
                offset: 1,
                color: "#108dc7",
              },
            ]),
          },
        },
        data: [63, 194, 234, 321, 278, 110],
      },
      {
        name: "电气故障",
        type: "bar",
        barWidth: "15%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#ec2F4B",
              },
              {
                offset: 1,
                color: "#009FFF",
              },
            ]),
          },
        },
        data: [23, 354, 334, 221, 178, 190],
      },
      {
        name: "网络通信",
        type: "bar",
        barWidth: "15%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#7F7FD5",
              },
              {
                offset: 1,
                color: "#86A8E7",
              },
            ]),
          },
        },
        data: [23, 354, 334, 221, 178, 190],
      },
    ],
  };

  fault_causeChart.setOption(option);
  window.addEventListener("resize", function () {
    fault_causeChart.resize();
  });
}
